<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>商品搜索</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <div class="row mb-4">
            <div class="col">
                <form th:action="@{/product/search}" method="get" class="d-flex">
                    <input type="text" name="keyword" class="form-control me-2" 
                           th:value="${keyword}" placeholder="输入商品名称">
                    <button type="submit" class="btn btn-primary">搜索</button>
                </form>
            </div>
            <div class="col-auto">
                <div th:if="${isLoggedIn}" class="d-flex">
                    <a th:href="@{/cart/list}" class="btn btn-outline-primary me-2">
                        <i class="fas fa-shopping-cart"></i> 购物车
                    </a>
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" 
                                id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-user"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                            <li><a class="dropdown-item" th:href="@{/user/password}">修改密码</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" th:href="@{/user/logout}">退出登录</a></li>
                        </ul>
                    </div>
                </div>
                <a th:unless="${isLoggedIn}" th:href="@{/user/login}" class="btn btn-outline-primary">登录</a>
            </div>
        </div>

        <div class="row row-cols-1 row-cols-md-3 g-4">
            <div class="col" th:each="product : ${products}">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title" th:text="${product.name}">商品名称</h5>
                        <p class="card-text" th:text="${product.description}">商品描述</p>
                        <p class="card-text">价格: ￥<span th:text="${product.price}">0.00</span></p>
                        
                        <div class="d-flex justify-content-between align-items-center" th:if="${isLoggedIn}">
                            <div>
                                <button th:if="${!likedProductIds.contains(product.id)}" 
                                        th:onclick="'like(' + ${product.id} + ')'"
                                        class="btn btn-outline-danger btn-sm me-2">
                                    <i class="far fa-heart"></i> 点赞
                                </button>
                                <button th:if="${likedProductIds.contains(product.id)}" 
                                        th:onclick="'unlike(' + ${product.id} + ')'"
                                        class="btn btn-danger btn-sm me-2">
                                    <i class="fas fa-heart"></i> 已点赞
                                </button>
                                
                                <button th:if="${!cartProductIds.contains(product.id)}" 
                                        th:onclick="'addToCart(' + ${product.id} + ',' + ${product.price} + ')'"
                                        class="btn btn-outline-primary btn-sm">
                                    <i class="fas fa-cart-plus"></i> 加入购物车
                                </button>
                                <button th:if="${cartProductIds.contains(product.id)}" 
                                        class="btn btn-primary btn-sm" disabled>
                                    <i class="fas fa-check"></i> 已在购物车
                                </button>
                            </div>
                            <a th:href="@{'/product/detail/' + ${product.id}}" class="btn btn-info btn-sm">
                                查看详情
                            </a>
                        </div>
                        
                        <div th:unless="${isLoggedIn}" class="text-center">
                            <a th:href="@{/user/login}" class="btn btn-primary btn-sm">登录后操作</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function like(productId) {
            fetch(`/like/${productId}`, {
                method: 'POST'
            }).then(response => response.text())
              .then(result => {
                  if(result === 'success') {
                      location.reload();
                  } else {
                      alert(result);
                  }
              });
        }

        function unlike(productId) {
            fetch(`/like/${productId}`, {
                method: 'DELETE'
            }).then(response => response.text())
              .then(result => {
                  if(result === 'success') {
                      location.reload();
                  } else {
                      alert(result);
                  }
              });
        }

        function addToCart(productId, price) {
            fetch('/cart/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `productId=${productId}&price=${price}`
            }).then(response => response.text())
              .then(result => {
                  if(result === 'success') {
                      location.reload();
                  } else {
                      alert(result);
                  }
              });
        }
    </script>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.0.2/js/bootstrap.bundle.min.js"></script>
</body>
</html> 